/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-06 11:41:58
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:32:52
 */
import React,{useEffect} from 'react';

import { Modal,Form, Input } from 'antd';

import FooterButton from '../footer/FooterButton'



const layout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 17,
    },
  };


const StoreModal = (props) => {

    // eslint-disable-next-line react-hooks/exhaustive-deps
    let content = {...props.content}
    
    const [form] = Form.useForm()

   useEffect(() => {
    form.setFieldsValue({
        name:content.storeName,
        Contact:content.leader,
        telephone:content.phone,
        remark:content.remark,

    })
    
    //    return () => {
    //        cleanup
    //    };
   }, [form,content]);
    // const [state, setstate] = useState(initialState);
//  const p=props
 
    //提交表单且数据验证成功后回调事件
    const onFinish = (values) => {
        console.log(values);
      };
    // 字段值更新时触发回调事件
    const  onValuesChange = () =>{

    }

  
    
    // console.log(content)
    // const {key} = props.content
    // console.log(key);

    return (
        <div>
            <Modal 
            footer={[
              <FooterButton 
              key='btnBox'
              btn1='保存' 
              btn2='关闭' 
              clickBtn1={props.handleOk}
              clickBtn2={props.onCancel}
               />
               ]}
            maskClosable={false} 
            mask={false} 
            forceRender={true} 
            title={props.title} 
            visible={props.visible} 
            // onOk={props.handleOk} 
            onCancel={props.onCancel} 
            centered 
            // cancelText={'关闭'} 
            // okText='保存' 
            getContainer={false} 
            bodyStyle={{paddingTop:"0"}}
            >
              <div style={{fontSize:"16px",fontWeight:"600",height:"40px",lineHeight:"40px"}}>{props.title}</div>
              <Form 
              {...layout} 
              name="storeModify" 
              onFinish={onFinish} 
              onValuesChange={onValuesChange} 
              form={form} 
              validateMessages={false}
              >
                    <Form.Item
                      name= 'name'
                      label="仓库名称"
                    //   rules={[
                    //     {
                    //       // required: true,
                    //       type:'text',
                    //     },
                    //   ]}
                    >
                      <Input value='1' style={{width:"200px"}} />
                    </Form.Item>
                    <Form.Item
                      name= 'Contact'
                      label="负责人"
                    //   rules={[
                    //     {
                    //       type: 'text',
                    //     },
                    //   ]}
                    >
                      <Input style={{width:"200px"}} />
                    </Form.Item>
                    <Form.Item
                      name= 'telephone'
                      label="电话"
                    //   rules={[
                    //     {
                    //       type: 'tel',
                    //     },
                    //   ]}
                    >
                      <Input style={{width:"200px"}} />
                    </Form.Item>
                    <Form.Item name='remark' label="备注">
                    <Input.TextArea />
                    </Form.Item>
             </Form>
            </Modal>
        </div>
    );
}

export default StoreModal;
